webpack4.0 入门流程

npm init -y                               //初始化生成 package.json 文件

npm i webpack --save-dev                  //安装 webpack

npm install webpack webpack-cli --save-dev        //安装 webpack-cli

"private": true,       //调整 package.json 文件，以便确保我们安装包是私有的(private)

npm install --save lodash                  //打包 lodash 依赖

npx webpack .\src\main.js --output-filename bundle.js --output-path .\dist\ --mode development        //输入main.js文件，输出bundle.js文件，输出路径dist目录下
或者
npx webpack ./src/main.js -o ./dist/bundle.js  //效果基本与上面相同 

 

由于每次修改 js 文件都要重新输入一次路径太麻烦了，此时想使用 npx webpack 来进行打包，但是会报以下错误：

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

 

解决方法：使用一个配置文件

webpack.config.js:

const path = require('path');

//这个配置文件，起始是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
  entry: './src/main.js',     //入口，表示要使用webpack打包哪个文件
  output: {
    filename: 'bundle.js',  //这里是输出文件的名称
    path: path.resolve(__dirname, 'dist')   //指定打包好的文件输出到了那个目录中去
  }
};

再次运行 npx webpack 即可

 

由于经常使用,不想手动刷新页面（就是想偷懒而已）我们可以在 package.json 添加一个 npm 脚本 ==> "dev"：

package.json：

cnpm install webpack-dev-server  //安装webpack-dev-server

此时，会有一个 http://localhost:8080/ 打开，找到里面的 index.html （我这里是src）

终端运行 npm run dev 即可（此时，每次修改js文件后查看效果，都只需运行npm run dev ，就会自动刷新页面）

 

最后，我们给 webpack-dev-server 添加参数

package.json：

--open : 自动打开默认浏览器

--port XXX: 修改端口号为 XXX

--contentBase XXX: 不再需要手动寻找主页面（我这里主页面在src下）

--hot: 热更新，就是只更新修改的部分

运行 npm run dev 完美完成

转载于:https://www.cnblogs.com/wuaidongfang/p/10383649.html