webpack 4.x 快速上手使用

webpack 4.x 快速上手使用

说明：使用软件 vs code，前提需要全局安装node.js

• 一、 环境安装

  1. 打开项目文件，首先安装 webpack

     npm add webpack webpack-cli  -g  // 全局安装
     npm add webpack webpack-cli  -D // 本地安装，快速入手使用 此方式
     

     安装完后会有一个 node_modules 文件夹，和一个package-lock.json 不用管他

  2. 初始化项目

     npm init -y
     

     初始化之后会有一个package.json

  3. webpack.config.js 配置文件 打包js

     默认配置文件在根目录，所以在跟目录创建一个 webpack.config.js 文件

     const path = require('path'); //引入path 
     
     module.exports = {
       mode: 'development',//默认为 production 生产环境，会自动压缩，如果不想自动压缩的话，设置成development 开发环境，
       entry: './src/index.js',//引入文件
       output: {
         filename: 'bundle.js',//打包之后的名字,可以加哈希名[hash:8]-bundel.js,义为八位数的hash值
         path: path.join(__dirname, 'dist')//打包之后存储位置
       }
     };
     

     在相应位置创建文件，打包js文件

     经过操作3已经可以打包, 为方便快速打包 修改 package.json 添加如下信息

     注意在package.json 中不允许有注释

     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "start": "webpack --config webpack.config.js"//可以设置配置文件的位置
       },
     

  4. 打包css文件

     打包css需要，下载两个loader

     添加两个loader
     npm add style-loader css-loader -d
     

     创建一个css文件并，将css文件导入index.js

     import './style.css';//es6 语法必须用webpack打包后才能解析
     

     配置文件添加如下内容webpack.config.js

     加入到module.exports中
     module: {
         rules: [
           {
             test: /\.css$/,//匹配.css文件
             use: [
               'style-loader',
               'css-loader'
             ]
           }
     	]
         },
     

  5. 打包html文件

     需要导入 html-webpack-plugin

     npm add html-webpack-plugin
     

     配置文件添加如下内容webpack.config.js

     //顶部再添加
     const HtmlWebpackPlugin = require('html-webpack-plugin');
     //加入到module.exports中
     
     plugins: [
         new HtmlWebpackPlugin({
           title: 'webpack hello',//打包出来会将html文件的title替换掉，前提是title用模板的书写方式
           filename: 'index.html',//输出文件名
           template: './src/index.html'//从哪个文件输出
         })
       ]
     
     

     在index.js中添加导入html

     import './index.html';
     import './style.css';
     
     console.log("hello webpack")
     
     

  6. 打包img

     **注意：**打包css里的图片和html标签的图片是有区别的，此贴为快速上手不细讲，一串全部搞定

     导入图片前需要添加三个loader，

     npm add html-loader url-loader file-loader
     
     

     修改配置文件webpack.config.js

      
      在 module: {    rules: [ 内部添加
     
         
         
      {
             test: /\.(htm|html)$/,
             use: ['html-loader']
           },
           {
             test: /\.(png|jpg|gif|jpeg)$/,
             use: [{
           
                 loader: 'url-loader',
                 options: {
                     esModule: false, // 这里设置为falsename
                     name: '[hash].[ext]',//打包后文件名为一串hash加文件尾缀，[name].[ext]即为原文件名
                     limit: 10240 //当图片小于10k时base64编码并载入浏览器能够减少http请求数
                 }
             }]
         }
     
     

  7. webpack-dev-server实时打包更新

     首先安装

     npm add webpack-dev-server
     
     

     配置文件webpack.config.js

     //在module.exports 内添加
     
     devServer: {
         contentBase: './dist',
         hot: true,//希望是热更新就使用此项
         port: 3000 //指定端口
       },
     
     
     

     添加快捷启动修改package.json

     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "start": "webpack-dev-server",
         "build": "webpack"
       },
     
     

     注意：此时若要运行webpack 要用如下命令

     npm run-script build
     
     

     ​ 时间：2020年3月13

至此快速入门完毕

*附件：*本文所涉及到的下载均为写作时的最新版本,如下

 "dependencies": {
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.3",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

相关代码已发部到gitee，记得点赞留言
https://gitee.com/xiaoyangjj/quick_start_of_webpack4_x