webpack 知識點

 

安裝 webpack

npm install -g webpack

npm install -g webpack-cli@2.x

 

初始化項目

npm init -y

npm install --save -dev webpack@3.x              參數--save-dev的含義是表明把你的安裝包信息寫入package.json文件的devDependencies字段中，包安裝在指定項目的node_modules文件夾下

 

webpack js中自帶模塊化

D:\WebstormProjects\webpack1>webpack src/app.js dist/bundle.js     入口文件   出口文件

或者配置webpack.config.js

 

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

在package.json 中配置  代替   webpack命令

"scripts": {
  "built":"webpack"
},

npm run built

webpack自帶服務器

安裝服務器

D:\WebstormProjects\webpack1>npm install -g webpack-dev-server@2.x

本地安裝

D:\WebstormProjects\webpack1>npm install -D webpack-dev-server@2.x

運行服務器

D:\WebstormProjects\webpack1>webpack-dev-server

代替webpack-dev-server命令 在

package.json 中配置

"scripts": {
  "built": "webpack",
  "dev":"webpack-dev-server"
},
npm run dev

   配置項目默認訪問路徑  

--content-base dist

"dev":"webpack-dev-server --content-base dist"

至關於
http://localhost:8080/dist

熱更新

--inline

"dev":"webpack-dev-server --content-base dist --inline"

修改端口

--port=8081

"dev":"webpack-dev-server --content-base dist --inline --hot --port=8081"

本地安裝json-loader  將json格式的數據轉換成js對象  
默認已經安裝

npm install -D json-loader

 

const path = require('path');module.exports = {    entry: './src/app.js',    output: {        path: path.resolve(__dirname, 'dist'),        filename: 'bundle.js'    },    module:{        rules:[            {                test:/\.json$/,                use:"json-loader"            }        ]    }};