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項目基本結構.