webpack入门使用方法

来源:赵克立博客 分类: HTML5 标签:webpack发布时间:2018-08-20 10:23:43最后更新:2018-08-20 15:37:37浏览:1288
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2018-08-20 15:37:37
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

目前前端开发都流行模块打包啦,这个问题也确实是一个急切的问题。不得已。也看啦下入门的使用方法,之前也看过但是因为没有记录,现在再看的时候又看不懂啦,哎。

部署环境

需要安装的软件有

nodejs+npm

需要npm安装的包有如下

//webpack工具,不用说得安装

"webpack": "^4.16.5", 

//方便操作管理webpack的一些配置和操作

"webpack-cli": "^3.1.0",

//启动一个本地服务器,以便自动打包更新页面,方便调试

"webpack-dev-server": "^3.1.5"


找一个空目录,在当前目录打开命令行使用npm 初始化一个package.json文件,并且安装上面提到的三个包,命令如下

npm init
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev

在目录中创建一个webpack.config.js文件,使用webpack打包的时候会默认使用这个文件的相关配置打包,如下

module.exports = {
    entry: __dirname + "/src/js/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: __dirname + "/src/pages", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true, // 默认为true, 意思是,在打包时会注入一段代码到最后的js文件中,用来监视页面的改动而自动刷新页面,当为false时,网页自动刷新的模式是iframe,也就是将模板页放在一个frame中
        open: true, //自动打开浏览器
        port: 9988,
        hot: false,
        compress: true //压缩
    }
}

如果想使用其它位置的配置文件时可以用参数指定如下

webpack --config ./build/webpack.dev.conf.js
webpack-dev-server --config ./build/webpack.dev.conf.js

这个时候在当前目录打开命令行输入webpack(会自动查找当前目录的webpack.config.js配置文件)就会打包生成一个bundle.js啦.

正常情况下开发时是需要看效果的,所有我们就要用到webpack-dev-server来启动一个本地的服务器来实时的查看页面效果,安装完webpack-dev-server后就可以在命令行输入下面代码来启动(使用webpack.config.js配置文件)一个本地服务器来查看

webpack-dev-server --open --mode development

显然上面命令每次开发时都输入太麻烦啦,使用npm提供的scripts配置方法来便捷启动,scripts里面的每个配置项都可以使用npm run 配置项来启动,打开package.json文件里面添加 scripts配置项来快捷启动,下面添加啦三个  start ,dev ,build,其中dev,build是构建js用的,start是启动一个本地服务器并且监控文件的变化,使用这一个start就够用啦

{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

启动服务器的方法

npm run start

这个时候你再改动一下对应的页面来js,浏览器会自动刷新看到效果


微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python