2 3 ## Webpack的配置和使用 4 ### 安装 5 1. 全局安装 6 ``` 7 npm install webpack -g 8 ``` 9 2. 本地安装 10 ``` 11 npm install webpack -D 12 ``` 13 ### 使用 14 #### 直接通过命令参数来执行 15 1. 如果是全局安装的 16 ``` 17 webpack 入口文件 出口文件 18 ``` 19 2. 如果是本地安装的 20 2.1 先在package.json的script标签中添加一条命令（就和全局的命令一模一样） 21 2.2 通过npm run 命令名 来执行命令 22 23 #### 通过配置文件来执行 24 如果是使用的配置文件，那么在使用webpack的命令的时候，就不需要再传递参数了！ 25 26 配置文件名为 webpack.config.js, 这个文件一般被放在网站的根目录下 27 28 webpack.config.js是一个node.js的模块，所以里面的代码，就是nodejs代码，需要通过nodejs模块化的方式，将配置对象进行导出！ 29 30 基础配置项 31 ```js 32 var path = require("path") 33 34 module.exports = { 35 entry: path.join(__dirname, "入口文件路径"), 36 output: { 37 path: path.join(__dirname, "dist"), 38 filename: "bundel.js" 39 } 40 } 41 42 ``` 43 44 ### 使用webpack打包别的类型的文件 45 webpack默认支持的文件类型，只有js文件，如果在项目中出现了其他类型的文件，那么webpack本身是无法进行处理的，所以我们需要为每一个类型的文件，单独指定一个加载器（loader） 46 47 #### css 48 在webpack的项目中，如果要使用css文件，我们可以将css文件当做一个模块，使用import的方式引入到js当中，最终webpack会将css文件中的内容，一起打包到最终的js文件中，也可以在页面中生效 49 50 要打包css文件，就需要给css文件配置loader，需要两个loader： style-loader css-loader 51 52 1. 安装相应的loader 53 ``` 54 npm install style-loader css-loader -D 55 ``` 56 2. 在webpack.config.js中配置css文件对应的loader 57 ```js 58 var path = require("path") 59 60 module.exports = { 61 entry: path.join(__dirname, "入口文件路径"), 62 output: { 63 path: path.join(__dirname, "dist"), 64 filename: "bundel.js" 65 }, 66 //module属性中就可以进行loader的配置 67 module: { 68 rules: [ 69 { 70 test: /\.css$/, 71 //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的 72 use: ["style-loader", "css-loader"] 73 } 74 ] 75 } 76 } 77 ``` 78 79 #### less sass 80 less需要的loader: style-loader css-loader less-loader 依赖项： less 81 sass需要的loader: style-loader css-loader sass-loader 依赖项： node-sass 82 83 1. 安装相应的loader 84 85 1.1 less-loader: 86 ``` 87 npm install less-loader less -D 88 ``` 89 1.2 sass-loader 90 ``` 91 npm install sass-loader node-sass -D 92 ``` 93 2. 配置加载器 94 ```js 95 var path = require("path") 96 97 module.exports = { 98 entry: path.join(__dirname, "入口文件路径"), 99 output: { 100 path: path.join(__dirname, "dist"), 101 filename: "bundel.js" 102 }, 103 //module属性中就可以进行loader的配置 104 module: { 105 rules: [ 106 { 107 test: /\.css$/, 108 //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的 109 use: ["style-loader", "css-loader"] 110 }, 111 { 112 //less文件 113 test: /\.less$/, 114 use: ["style-loader", "css-loader", "less-loader"] 115 }, 116 { 117 //sass文件 118 test: /\.sass$/, 119 use: ["style-loader", "css-loader", "sass-loader"] 120 } 121 ] 122 } 123 } 124 ``` 125 126 #### 图片 字体 打包 127 图片需要的loader: url-loader 依赖项： file-loader 128 字体需要的loader: url-loader 129 130 1. 安装 131 ``` 132 npm install url-loader file-loader -D 133 ``` 134 2. 配置 135 ```js 136 var path = require("path") 137 138 module.exports = { 139 entry: path.join(__dirname, "入口文件路径"), 140 output: { 141 path: path.join(__dirname, "dist"), 142 filename: "bundel.js" 143 }, 144 //module属性中就可以进行loader的配置 145 module: { 146 rules: [ 147 { 148 test: /\.css$/, 149 //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的 150 use: ["style-loader", "css-loader"] 151 }, 152 { 153 //less文件 154 test: /\.less$/, 155 use: ["style-loader", "css-loader", "less-loader"] 156 }, 157 { 158 //sass文件 159 test: /\.sass$/, 160 use: ["style-loader", "css-loader", "sass-loader"] 161 }, 162 { 163 //图片文件 164 test: /\.(jpg|gif|png|jpeg|svg|bmp)$/, 165 use: [{ 166 loader: "url-loader", 167 options: { 168 //如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里 169 limit: 1024 * 50 170 } 171 }] 172 }, 173 { 174 //字体文件 175 test: /\.(woff|woff2|eot|ttf)$/, 176 use: ["url-loader"] 177 } 178 ] 179 } 180 } 181 ``` 182 183 ### ES6 代码打包 184 用到的loader: babel-loader 依赖项： babel-core 185 用到转码规则： babel-preset-env 186 1. 安装 187 ``` 188 npm install babel-loader babel-core -D 189 ``` 190 2. 配置 191 2.1 创建一个.babelrc 用来指定转码的规则 192 ```js 193 { 194 presets: [ 195 "env" 196 ] 197 } 198 ``` 199 2.2 webpack.config.js配置加载器 200 201 ```js 202 var path = require("path") 203 204 module.exports = { 205 entry: path.join(__dirname, "入口文件路径"), 206 output: { 207 path: path.join(__dirname, "dist"), 208 filename: "bundel.js" 209 }, 210 //module属性中就可以进行loader的配置 211 module: { 212 rules: [ 213 { 214 test: /\.css$/, 215 //use中放的就是加载器的名称，要注意，调用的顺序是从后向前的 216 use: ["style-loader", "css-loader"] 217 }, 218 { 219 //less文件 220 test: /\.less$/, 221 use: ["style-loader", "css-loader", "less-loader"] 222 }, 223 { 224 //sass文件 225 test: /\.sass$/, 226 use: ["style-loader", "css-loader", "sass-loader"] 227 }, 228 { 229 //图片文件 230 test: /\.(jpg|gif|png|jpeg|svg|bmp)$/, 231 use: [{ 232 loader: "url-loader", 233 options: { 234 //如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里 235 limit: 1024 * 50 236 } 237 }] 238 }, 239 { 240 //字体文件 241 test: /\.(woff|woff2|eot|ttf)$/, 242 use: ["url-loader"] 243 }, 244 { 245 //ES6 246 test: /\.js$/, 247 //排除node_modules中的内容 248 exclude: /node_modules/, 249 use: ["babel-loader"] 250 } 251 ] 252 } 253 } 254 ``` 255 ### html-webpack-plugin的使用 256 作用： 将src目录下的index.html作为模板，每次在打包的时候，都会将其复制到dist目录下，并且自动为其引入bundle.js 257 258 1. 安装 259 ``` 260 npm install html-webpack-plugin -D 261 ``` 262 2. 配置webpack.config.js 263 ```js 264 var HtmlWebpackPlugin = require("html-webpack-plugin") 265 var path = require("path") 266 267 module.exports = { 268 entry: path.join(__dirname, "入口文件路径"), 269 output: { 270 path: path.join(__dirname, "dist"), 271 filename: "bundel.js" 272 }, 273 plugins:[ 274 new HtmlWebpackPlugin({ 275 template: path.join(__dirname, "src/index.html") 276 }) 277 ] 278 } 279 280 ``` 281 282 ## webpack-dev-server的使用 283 如果没有这个东西，那么每次在修改代码之后，都需要重新进行打包，才能看到效果！ 284 285 webpack-dev-server可以启动一个简易的http服务器，当代码发生改变的时候，实时的进行打包并且刷新页面显示效果！ 这个东西只会打包更新了的内容，并不会将整个项目完整的打包，所以效率会比较高，而且它打包的内容都是直接放在内存里面的，所以访问速率也会非常快 286 287 1. 安装 288 ``` 289 npm install webpack-dev-server -D 290 ``` 291 292 2. 使用 293 294 2.1 直接给命令传参 295 ``` 296 webpack-dev-server --port 9000 --contentBase ./src --hot 297 ``` 298 2.2 在webpack.config.js中进行配置 299 ```js 300 var path = require("path"); 301 302 //如果使用webpack.config方式进行配置，那么必须有这个包引入 303 var webpack = reuqire("webpack"); 304 305 module.exports = { 306 entry: path.join(__dirname, "入口文件路径"), 307 output: { 308 path: path.join(__dirname, "dist"), 309 filename: "bundel.js" 310 }, 311 devServer: { 312 port: 9999, 313 contentBase: "./src", 314 hot: true 315 }, 316 plugins:[ 317 //这边是给dev-server设置一个插件，如果没有这个插件则热更新会报错 318 new webpack.HotModuleReplacementPlugin() 319 ] 320 } 321 322 ``` 323 324 ## babel-cli的使用 325 1. 安装 326 ``` 327 npm install babel-cli -g 328 npm install babel-preset-env 329 ``` 330 2. 配置 331 创建.babelrc文件 332 ``` 333 { 334 presets: [ 335 "env" 336 ] 337 } 338 ``` 339 3. 使用 340 ``` 341 babel 要转换的文件的路径 --out-file 输出的文件的路径 342 ``` 343 344 ## 单文件组件 345 就是将组件相关的内容（HTML JS CSS）全部放到了一个.vue文件当中 346 347 ```html 348 <template> 349 <div> 350 //这里就是组件的html部分也就是所谓的模板 351 </div> 352 </template> 353 354 <script> 355 export default { 356 data(){}, 357 filters: {}, 358 components: {}, 359 watch: {}, 360 directives: {}, 361 created(){} 362 } 363 </script> 364 365 scoped属性标志着这个style标签中的css样式是只对当前组件有效！ 366 <style scoped> 367 </style> 368 ``` 369 370 ## Vue-Cli 371 这是一个可以快速生成一个项目基本结构的vue工具 372 373 1. 安装 374 ``` 375 npm install vue-cli -g 376 ``` 377 2. 使用 378 ``` 379 vue init webpack 项目名称 380 ``` 381 382 ## 在项目模板中写代码 383 1. 创建组件！ 384 2. 配置路由！ 385 386 项目模板的获取两种方式： 387 1. 自己写的模板 388 https://github.com/avakpan/vue-template 389 390 2. vue-cli生成模板
在使用vue框架的时候对应的webpack.config.js的配置,利用babel转换ES6为ES5的相关配置,以及下载vue项目基本结构的地址,通过vue-cli搭建vue项目基本结构.