生活随笔
收集整理的這篇文章主要介紹了
一个简易的webpack开发环境
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本菜鳥搭建的入門級別的webpack環境， 僅供參考，webpack學精很不容易，每個插件作者都有自己的思想。 待我吃透了再說。 待我后續完善， 目前可以
- 提取圖片
- 服務器環境 支持跨域 熱更新
- ES6語法降級
- less 轉 es6
//壓縮js插件
var UglifyJSPlugin = require(
'uglifyjs-webpack-plugin');
//
var webpack = require(
'webpack');
//提取公共代碼
var ExtractTextPlugin = require(
"extract-text-webpack-plugin");
//在使用時將不再需要import和require進行引入， ProvidePlugin進行實例初始化后，jquery就會被自動加載并導入對應的node模塊中
var providePlugin = new webpack.ProvidePlugin({ $:
'jquery', jQuery:
'jquery',
'window.jQuery':
'jquery' });
module.exports = {entry: { //多入口index:
'./src/js/index.js',goodsInfo:
'./src/js/goodsInfo.js'},output: {//多出口filename:
'[name].js',path: __dirname +
'/out',publicPath:
'http://localhost:8080/out'},module: {rules: [{
test: /.js$/, use: [
'babel-loader'] }, //js語法降級// {
test: /.css$/, use: [
'style-loader',
'css-loader'] }, //css{
test: /.css$/,use: ExtractTextPlugin.extract({fallback:
"style-loader",use:
"css-loader"})},{
test: /.jpg|png|gif|svg$/, use: [
'url-loader?limit=8192&name=./[name].[ext]'] },//設置尺寸名字和擴展名{
test: /.less$/, use: [
'style-loader',
'css-loader',
'less-loader'] }]},plugins: [new UglifyJSPlugin(),new webpack.optimize.CommonsChunkPlugin({name:
"commons",filename:
"commons.js",minChunks: 2}),new ExtractTextPlugin(
"[name].css"),providePlugin],devServer: {quiet:
false, //控制臺中不輸出打包的信息open:
true, //打開瀏覽器noInfo:
false,hot:
true, //開啟熱點inline:
true, //開啟頁面自動刷新lazy:
false, //不啟動懶加載progress:
true, //顯示打包的進度watchOptions: {aggregateTimeout: 300},port:
'8088', //設置端口號proxy: { //跨域
'/api': {target:
'http://localhost:80', //目標服務器ws:
true, //開啟websocketchangeOrigin:
true, //開啟代理pathRewrite: {
'^/api':
'/api' // 會請求到 http://localhost:80/api}}}}
}
復制代碼package.json文件
{
"name":
"webpack1",
"version":
"1.0.0",
"description":
"",
"main":
"index.js",
"scripts": {
"test":
"echo \"Error: no test specified\" && exit 1",
"duyi":
"webpack-dev-server --devtool eval-source-map --progress --colors"},
"author":
"",
"license":
"ISC",
"dependencies": {
"babel":
"^6.23.0",
"babel-core":
"^6.26.0",
"babel-loader":
"^7.1.3",
"css-loader":
"^0.28.10",
"file-loader":
"^1.1.9",
"style-loader":
"^0.20.2",
"uglifyjs-webpack-plugin":
"^1.2.2",
"url-loader":
"^0.6.2",
"webpack":
"^3.5.5"},
"devDependencies": {
"extract-text-webpack-plugin":
"^3.0.2",
"jquery":
"^3.3.1",
"less":
"^3.0.1",
"less-loader":
"^4.0.6"}
}
復制代碼
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的一个简易的webpack开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
