RichErp - webpack 用法

 

npm初始化一个目录，建立pack.json文件：npm init

{
  "name": "test-wepback",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

全局安装 npm install -g webpack

局部安装 npm install --save-dev webpack

"author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1"
  }

建立测试目录：
.
├── dist
├── node_modules
├── package.json
└── src
    └── app.js



webpack ./src/app.js ./dist/app.bundle.js

webpack --watch ./src/app.js ./dist/app.bundle.js
压缩一下 webpack -p ./src/app.js ./dist/app.bundle.js
 配置文件 webpack.config.js

module.exports = {
entry: './src/app.js',
output: {
filename: './dist/app.bundle.js'
}
};

只需要输入命令：webpack 或 webpack -p 就可以了

 package.json 文件中增加几个命令，如：

{
  "name": "test-wepback",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}

只需要运行：npm run dev  相当于：webpack -d --watch
或 npm run prod

安装 html-webpack-plugi
npm install html-webpack-plugin --save-dev
"devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.8.1"
  }

webpack.config.js 文件修改如下

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};

 运行 npm run dev 命令，在 dist 目录生成了 index.html 文件：

<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script></body>
</html>

 

  安装：npm install --save-dev css-loader style-loader

npm install sass-loader node-sass --save-dev

npm install --save-dev extract-text-webpack-plugin

npm install -g webpack-dev-server
npm install --save-dev webpack-dev-server

 

 

webpack.config.js 文件修改如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
devServer: {
port: 9000,
open: true
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
}),
new ExtractTextPlugin('style.css')
],
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
}
]
}
};








posted @ 2018-01-26 09:38  RichErp  阅读(104)  评论(0)    收藏  举报