webpack学习笔记

1. 安装全局安装：
   1. //全局安装 npm install -g webpack

npm install webpack-cli -g

1. 初始化项目：
   1. npm init：创建packge,json.
   2. npm install webpack webpack-cli --save-dev，局部安装webpack和webpack cli;
   3. 在项目中先建一个src目录，然后在里边先建一个index.js文件（打包入口）。在里边建立什么script，style等文件夹。
   4. 运行webpack --mode development或者webpack --mode production，开始打包。（当然可以把这句写在配置文件中的脚本package.json下面，"dev":"webpack --mode development"）。或者直接在 webpack：“fdasfsasafds” 到时候直接就npm run webpack
   5. 其他参数：
      1. --watch:每次自动的跟新。
      2. --progerss：会出现打包过程，有百分比进度条
      3. --display-modules：会把所有打包的模块列出来
      4. --display-reasons：会把打包的原因列出来
      5. --color
2. 特殊处理：
   1. 文件包含css:
      1. 先装：npm install css-loader style-loader --save-dev
      2. 然后再需要引入的地方。require("style-loader!css-loader!./css/test.css");
         1. css-loader：使webpack可以处理css文件
         2. style-loader：新建一个style标签，把css-loader处理过的文件放进去，然后插入到HTML标签中
3. webpack配置：
   1. 配置好项目。
   2. 在根目录下，先建一个webpack.config.js。项目结构如下：

//webpack.config.js
const path = require('path');

module.exports = {

entry: './src/script/test.js', // 入口文件

output: { // 出口文件

path: path.resolve(__dirname, 'dist'), // 出口文件位置，一定要是绝对路径.. index也会放到此文件夹下。

publicPath:"http://cdn.com/" 打包就会打到下边这个路径。

filename: 'js/bundle.js' //filename: '[name].js' // 出口文件名

}，plugins: [

new HtmlWebpackPlugin({ //HtmlWebpackPlugin

template: 'index.html' //找到你的index.html，

inject：“head", 生成的文件放到什么位置。

filename:"[hash]"，

minify:{

去空格等一些。

}，

chunks:[],//手动去包括那些文件

excludeChunks:[]//手动去不包括那些文件

title:"fsfd"值，可以传值，，在文档中获取。//变量名随便起

})

如果还有page 的话继续new 这个插件。

],mode: 'production'

}

• • 1. entry:"可以一单个字符串、或者数组（多个打包成一个文件），或者对象{page:"",page:[]}。
    2. output:字符串和数组就类似上面的。对象数组的话，就直接使用，[name],[hash](该次打包的hash值),[chunkhash]（不同的hash值来区别不同的数据）来占位，生成不同的文件。
    3. plugin：
       1. htmlWebpackPlugin.在文件中，通过js的方式获取到。htmlWebpackPlugin.files和htmlWebpackPlugin.options,然后获取大信息。
  • 修改webpack 打开的默认路径。 webpack --config ........js。
• 多html文件的打包。：
  1. 直接把数据打包到文件中，不用文档引用。compilation.assets[htmlWebpackPlugin.files.chunks.page2.entry].source() //htmlWebpackPlugin.files.chunks.page2.entry是不包括publicPath的，所以如果配置了public需要先去掉public。compilation.assets[htmlWebpackPlugin.files.chunks.page2.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()
  2. 完整例子：<script>

<%=compilation.assets[htmlWebpackPlugin.files.chunks.page2.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

</script>

注释：.page2.entry是不包括publicpath的。所以先要去去掉这个东西。

1. 在引入component.html的是时候。需要./当前位置的component.html，既是：./component.html
2. 其他loader配置：如下

3. //使用前都npm install xxx-loader --savad-dev 安装，有的还需要安装插件比如说：postcss的autoprefixer。也需要通过此方式来安装。
   module: {
       rules: [{
           test: /\.js$/,
           loader: 'babel-loader',
           exclude: __dirname + 'node_modules',
           include: __dirname + 'src',
           options: {presets: ['latest']}
       }, {
           test: /\.html$/,
           loader: "html-loader"
       }, {
           test: /\.css$/,
           use: [
               'style-loader',
               {loader: 'css-loader', options: {importLoaders: 1}}, {
                   loader: 'postcss-loader',
                   options: {
                       ident: 'postcss',
                       plugins: (loader) => [
                           require('autoprefixer')()
                       ]
                   }
               }
           ]
       }, {
           test: /\.less$/,
           loader: "style-loader!css-loader!less-loader"
       },{
           test:/(\.png|\.gpeg)$/,
           loader:"file-loader"
           // loader: 'url-loader',使用urlloader也可以。
           // options: {
           //     limit: 8192
           // }
       }]
   }