webpack开发Vue配置
一直以來使用webpack都是用的別人的配置，這幾天自己學習了一下。
項目地址：https://github.com/donghaohao...
新建整個工程
npm init
安裝依賴，這里我們開發vue項目，npm install vue --save，然后是開發時的依賴npm install --save-dev
這里有個重點是寫package.json里面的scripts，因為我們要分開發環境和生產環境。開發環境使用webpack-dev-server熱替換，生產環境需要壓縮，加hash等。使用npm run dev 或 npm run build 就可以運行下面的腳本。
配置
這里分為三個：webpack.base.config.js webpack.dev.config.js webpack.prod.config.js
entry設置入口文件，可以設置多個，就會打包成多個，vendors是我們如果引用了vue，jQuery等，就不會把這些和代碼打包到一起，會另外生成vendor.js。
entry: {main: './src/index.js',vendors: ['vue'] },輸出目錄，這里path是最后打包完的輸出目錄，publicPath是server上的目錄，這個自行設置好路徑。我們在開發模式的時候并不會輸出到目錄的。
webpack主要就是各種loader，這個可以參考我的github上的，需要解釋的有兩點，一是使用vue-loader時，因為需要使用postcss，所以下面需要這樣寫：
vue: {autoprefixer: false,postcss: [nested(),cssnext({ browsers: ['last 2 versions', 'Android >= 2.1', 'iOS >= 7.0'] }),flexFallback(),],},二個就是使用url-loader時，它會自動在圖片后面加hash，強迫癥患者表示不行，我們在開發模式下不加，生產模式下加。
// 開發模式 config.module.loaders.push({test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?name=[name].[ext]&limit=8192' }); // 生產模式 config.module.loaders.push({test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?limit=8192' });preLoaders 就是提前處理，這里我們使用了eslint，需要檢查書寫規范，然后添加 .eslintrc 文件.
resolve，extensions就是你require的時候可以省略擴展名，alias就是別名，在require的時候直接使用別名，避免寫的太長。
resolve: {// 擴展，require時省略擴展名extensions: ['', '.js', '.vue'],// 別名alias: {filter: path.join(__dirname, './src/filters'),components: path.join(__dirname, './src/components')}}插件
ExtractTextPlugin 提取CSS。
HtmlWebpackPlugin 生產html，這個可以自己生成也可以指定模板，會將打包的js和css插入到html中，這個有好多其他參數，可自行搜索。
webpack.optimize.CommonsChunkPlugin 這個為了抽取前面vendor里的第三方庫，打包成另外的文件。
webpack.optimize.UglifyJsPlugin 壓縮代碼。（生產模式）
CleanWebpackPlugin 這個是我最新發現的一個，主要是在打包到dist之前先刪除以前的dist，因為加hash厚并不會覆蓋。（生產模式）
這里使用了ES6，所以要配置一下.babelrc。
增加項目文件
這里我只是增加了一些測試的項目文件，開發和生產都正常，如有需要可以自行添加其他目錄。
總結
以上是生活随笔為你收集整理的webpack开发Vue配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sed和vim练习
- 下一篇： Springboot+vue项目疫情社区