webpack打包基础步骤

<!--

npm init -y 下载 package.json

 

npm i webpack@3.6.0 -S 下载node_modules npm un webpack 卸载

 

修改文件 package.json

"scripts": {

"dev": "webpack ./main.js ./build.js"

},

 

启动 npm run dev

-->

 

"scripts": {

"dev": "webpack --config ./webpack.dev.config.js",

"prod": "webpack --config ./webpack.prod.config.js"

},

 

启动  npm run dev

 　　 npm run dev 

 

webpack.dev.config.js内容

module.exports = {

// 入口 一个或多个

entry: {

'main': './main.js'

},

// 出口

output: {

filename: './build.js'

},

watch: true, //监视文件发生改动，自动产出build.js

}

 

webpack.prod.config.js内容

module.exports = {

// 入口 一个或多个

entry: {

'main': './main.js'

},

// 出口

output: {

filename: './build.js'

},

}

--------------------------------导入css

module.exports = {

// 入口 一个或多个

entry: {

'main': './main.js'

},

// 出口

output: {

filename: './build.js'

},

//生命模块

// 包含这各个loader

module: {

loaders: [

{ test: /\.css$/, loader: 'style-loader!css-loader' }

]

},

watch: true, //监视文件发生改动，自动产出build.js

}

 

 

npm i  css-loader -S

npm i  style-loader -S

 npm i url-loader file-loader -S